<template>
    <view class="i-auth-body">
        <view class="i-logo">
            <image
                src="/static/logo.jpg"
                mode="widthFix"
            />
        </view>
        <uv-button 
        v-if="checkLogin"
        open-type="getPhoneNumber"
        lang="zh_CN"
        @getphonenumber="getPhoneNum"
         shape="circle" style="margin:16px 0" type="primary">微信手机号一键登录</uv-button>
         <uv-button 
         v-else
         shape="circle" style="margin:16px 0" type="primary" @click="openCheck">微信手机号一键登录</uv-button>
        <uv-button shape="circle" style="margin:16px 0"  :hairline="true" :plain="true" @click="openOtherAuth">其它手机号登录</uv-button>
        <view class="i-check-body">
            <uv-checkbox-group 
                v-model="checkLogin" 
                shape="circle">
                <uv-checkbox 
                    label="登录即表明同意" 
                    name=""
                ></uv-checkbox>
            </uv-checkbox-group>
            <uv-link href="https://www.uvui.cn" text="《隐私协议》"></uv-link>
            <uv-link href="https://www.uvui.cn" text="《服务协议》"></uv-link>
        </view>
        <uv-popup ref="popup" round="12" mode="bottom" custom-style="height: 50vh;" bgColor="#f5f5f5" :closeable="true" closeIconPos="top-right">
			<MobileAuth/>
		</uv-popup>
    </view>
</template>
  
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useUCenterStore } from '@/stores/uCenter'
import MobileAuth from "@/components/auth"
const checkLogin = ref<any>(false)
const ucenter = useUCenterStore();
import {
  wxAutoLoginMp,
  bindMobileByWx
} from '@/api/Ucenter'

const popup = ref()
const openOtherAuth = () => {
    if(checkLogin.value){
        popup.value.open()
    }else openCheck()
}

const openCheck = () => {
    uni.showToast({
        title: '请阅读并勾选隐私和服务协议',
        icon: 'none'
    })
    return false
}

const vops = ref<any>({})
const getPhoneNum = (ops : any) => {
      if (ops.errMsg !== 'getPhoneNumber:ok') {
        return
      }
      vops.value = ops
      uni.checkSession({
        fail(err) {
          console.log(err)
          // session_key 已经失效，需要重新执行登录流程
        },
        complete() {
            userLoginMp()
          //将code,encryptedData,iv传给后台进行解密
        }
      })
}

const userLoginMp = () => {
      uni.login({
        success: loginCodeInfo => {
          if (loginCodeInfo.code) {
            let params = {
              code: loginCodeInfo.code
            }
            wxAutoLoginMp(params).then(response => {
              if (response.success) {
                const memberInfo = response.data
                uni.setStorageSync('memberInfo', memberInfo)
                if (memberInfo.bindMobile == 'Y') {
                  setMemberInfo(memberInfo)
                } else {
                    bindMobile()
                }
              } else {
                uni.showToast({
                  title: response.msg,
                  icon: 'error'
                })
              }
            })
          }
        },
        fail: () => {
          uni.hideLoading()
        }
      })
}
const member = ref<any>({})
const setMemberInfo = (memberInfo : any) => {
      uni.setStorageSync('memberInfo', memberInfo)
      ucenter.$patch({ 'memberInfo': memberInfo})
      member.value = memberInfo
      if (ucenter.redirectPath) {
        uni.reLaunch({
          url: ucenter.redirectPath
        })
        ucenter.$patch({ 'redirectPath': ''})
      } else {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
}

const bindMobile = () => {
      uni.login({
        success: res => {
          if (res.code) {
            bindMobileByWx({
              code: res.code,
              data: JSON.stringify(vops.value)
            }).then(member => {
              if (member.success) {
                let memberInfo = member.data
                setMemberInfo(memberInfo)
              } else {
                uni.showToast({
                  icon: 'error',
                  title: member.msg
                })
              }
            })
          }
        }
      })
}

onLoad((options : any) => {

})
</script>
<style>
.i-auth-body{
    width:100%;
    height:100%;
    position:relative;
    padding:16px;box-sizing:border-box;
}
.i-logo{
    margin: 20vh 0 32px;
    display: flex;
    justify-content: center;
}
.i-logo image{width:62%;}
.i-check-body{
    display: flex;
    margin-top:32px;
}
.i-check-body .uv-link,.i-check-body .uv-checkbox-group{flex: none !important;}
.i-auth-body .uv-button-wrapper{
    margin:16px 0;
}
.auth-other{
    padding:16px;
}
.auth-other-title{
    font-size:16px;
    font-weight: 600;
    padding:0px 0 32px 0;
    display: block;
}
.auth-other .uv-input{
    background: #fff !important;
    border: 0 !important;
    margin: 16px 0 !important;
    padding:16px !important;
}
.auth-other .uv-input .uv-button-wrapper{margin: 0px !important}
</style>